<template>
  <div class="address">
    <el-card shadow="always">
      <div slot="header">
        <el-button
          type="primary"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </div>
      <el-table :data="list" border stripe>
        <el-table-column
          type="index"
          label="#"
          width="75"
          align="center"
          fixed="left"
        />
        <el-table-column
          prop="addressName"
          label="地址名称"
          width="200"
          align="center"
        />
        <el-table-column
          prop="sendStatus"
          label="默认发货地址"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            默认发货地址&nbsp;&nbsp;
            <el-switch
              v-model="scope.row.sendStatus"
              :active-value="1"
              :inactive-value="0"
              @change="handleSendStatus(scope.row.id, scope.row.sendStatus)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="收货人姓名"
          width="150"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="收货人电话"
          width="300"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="收货人地址"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              <div class="p">{{ scope.row | addressLabel }}</div>
              <div class="p">{{ scope.row.detailAddress }}</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="receiveStatus"
          label="默认收货地址"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            默认收货地址&nbsp;&nbsp;<el-switch
              v-model="scope.row.receiveStatus"
              :active-value="1"
              :inactive-value="0"
              @change="
                handleReceiveStatus(scope.row.id, scope.row.receiveStatus)
              "
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="300"
          align="center"
        />

        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template slot-scope="scope">
            <div>
              <el-button
                type="text"
                size="mini"
                @click="handleEdit(scope.row)"
              >编辑</el-button>
              <el-button
                type="text"
                size="mini"
                style="color: red"
                @click="handleDel(scope.row)"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <AddressDetail ref="addressDetail" />
  </div>
</template>
<script>
import {
  findReturnApply,
  delAddress,
  setReceiveOne,
  setSendOne
} from '@/api/order/address/index'
import AddressDetail from './components/AddressDetail.vue'
export default {
  components: {
    AddressDetail
  },
  filters: {
    addressLabel(val) {
      return `${val.province}${val.city}${val.region}`
    }
  },
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getAddressList()
  },
  methods: {
    // 获取地址列表
    async getAddressList() {
      const { success, data, message } = await findReturnApply()
      if (success) {
        this.list = data.items
      } else {
        this.$message.error(message)
      }
    },
    // 新增
    handleAdd() {
      this.$refs.addressDetail.open()
    },
    // 编辑
    handleEdit(item) {
      this.$refs.addressDetail.open(item.id)
    },
    // 删除
    handleDel(item) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const { success, message } = await delAddress(item.id)
          if (success) {
            this.$message.success('删除成功')
            this.getAddressList()
          } else {
            this.$message.error(message)
          }
        })
        .catch(() => {
          this.$message.info('你取消了操作')
        })
    },
    // 设置默认发货地址
    async handleSendStatus(id, sendStatus) {
      const { success, message } = await setSendOne({ id, sendStatus })
      if (success) {
        this.$message.success('更新成功')
        this.getAddressList()
      } else {
        this.$message.error(message)
      }
    },
    async handleReceiveStatus(id, receiveStatus) {
      const { success, message } = await setReceiveOne({ id, receiveStatus })
      if (success) {
        this.$message.success('更新成功')
        this.getAddressList()
      } else {
        this.$message.error(message)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.address {
  margin: 30px;
  .p {
    margin: 10px 0;
  }
}
</style>
